<template>
	<div :class="windowWidth > 1024 ? 'pcheader' : 'sticky'">
		<div class="header_com" :class="windowWidth > 1024 ? 'pc_layer' : ''">
			<div>
				<!-- <img src="@/assets/images/home/logo.png" class="logo" /> -->
			</div>
			<div class="login_box">
				<div v-if="!userInfo.id">
					<el-button @click="handleIn">{{$t('home.signIn')}}</el-button>
					<el-button class="up" @click="handleUp">{{$t('home.signUp')}}</el-button>
				</div>
				<div class="userinfo" v-else>
					<div class="money" @click="handleMoney()">
						<div class="icon"></div>
						<div class="yuan">{{balance}}</div>
						<!-- <div class="add"></div> -->
					</div>
					<el-popover :placement="windowWidth > 1024 ? 'bottom-end' : 'bottom'" width="138" trigger="click"
						:visible-arrow="false" popper-class="tick tick2" v-model="hasUserTool">
						<div class="header cur_p" slot="reference">
							<img :src="userInfo.avatar" style="width: 100%;" />
						</div>
						<div class="box_language">
							<div class="item_language" @click="handleResetPaw()">
								<img src="@/assets/images/home/setPas.png" />
								{{$t('home.resetPassword')}}
							</div>
							<div class="item_language" @click="handleLoginOut()">
								<img src="@/assets/images/home/out.png" />
								{{$t('home.loginOut')}}
							</div>
						</div>
					</el-popover>
				</div>
				<el-popover :placement="windowWidth > 1024 ? 'bottom-end' : 'bottom'" width="102" trigger="click"
					:visible-arrow="false" popper-class="tick tick2" v-model="hasLanguage" style="padding-top: 5px;">
					<img src="@/assets/images/home/yuyan.png" class="yuyan" slot="reference" />
					<div class="box_language">
						<div class="item_language item_language2" :class="{active: $i18n.locale == item.locale}"
							v-for="(item,index) in $locale" :key="index" @click="handleItem(item)">
							{{item.name}}
						</div>
					</div>
				</el-popover>
			</div>
		</div>


		<!-- 登录 -->
		<Login />
		<!-- 注册 -->
		<Register v-if="hasRegister" />
		<!-- 忘记密码 -->
		<Forgot v-if="hasResetPassword" />
		<!-- 修改密码 -->
		<SetPassword />
		<!-- 充值 -->
		<Deposit />
	</div>
</template>

<script>
	import enUS from 'vant/es/locale/lang/en-US';
	import zhCN from 'vant/es/locale/lang/zh-CN';
	import Cookie from 'vue-cookies'
	import {
		userLogout
	} from '@/api/home.js'
	import Login from '@/views/pc/login/index.vue'
	import Register from '@/views/pc/login/register.vue'
	import Forgot from '@/views/pc/login/forgot.vue'
	import SetPassword from '@/views/pc/login/setPassword.vue'
	import Deposit from '@/views/pc/deposit.vue'
	export default {
		props: {},
		components: {
			Login,
			Register,
			Forgot,
			SetPassword,
			Deposit
		},
		data() {
			return {
				hasLanguage: false,
				hasUserTool: false,
				localeObj: {
					'zh': {
						name: 'zh-CN',
						file: zhCN
					},
					'en': {
						name: 'en-US',
						file: enUS
					}
				}
			}
		},
		computed: {
			userInfo() {
				return this.$store.state.userInfo
			},
			balance() {
				return this.$store.state.balance
			},
			windowWidth() {
				return this.$store.state.windowWidth
			},
			hasRegister(){
				return this.$store.state.hasRegister
			},
			hasResetPassword(){
				return this.$store.state.hasResetPassword
			}
		},
		watch: {},
		mounted() {},
		methods: {
			handleIn() {
				if (this.windowWidth > 1024) {
					this.$store.commit('changeLogin', true)
				} else {
					this.$router.push('/mobile/login')
				}
			},
			handleUp() {
				if (this.windowWidth > 1024) {
					this.$store.commit('changeRegister', true)
				} else {
					this.$router.push('/mobile/register')
				}
			},
			handleMoney() {
				// if (this.windowWidth > 1024) {
				// 	this.$store.commit('changeDeposit', true)
				// } else {
				// 	this.$router.push('/mobile/Deposit')
				// }
			},
			handleResetPaw() {
				if (this.windowWidth > 1024) {
					this.$store.commit('changeSetPassword', true)
				} else {
					this.$router.push('/mobile/setPassword')
				}
			},
			async handleLoginOut() {
				const res = await userLogout()
				localStorage.clear('LOGIN_USER_INFO')
				localStorage.clear('TOKEN')
				this.$store.commit('onChangeUserInfo', {})
				this.$message(this.$t('success'))
			},
			handleItem(item) {
				this.$i18n.locale = item.locale
				localStorage.setItem('lang', item.locale)
				this.hasLanguage = false;
			}
		}
	}
</script>

<style scoped lang="less">
	.sticky {
		position: sticky;
		top: 0px;
		z-index: 999;
		background: #1B232E;
		padding: 0 15px;
	}

	.header_com {
		height: 50px;
		background: #1B232E;
		padding: 10px 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: sticky;
		top: 0px;
		z-index: 999;


		.logo {
			width: 24px;
			height: auto;
		}

		.login_box {
			display: flex;
			align-items: center;

			::v-deep .el-button {
				width: 100px;
				height: 34px;
				padding: 10px 20px;
				background-color: #353F4C;
				border: 0;
				color: #fff;
				border-radius: 6px;
			}

			.el-button+.el-button {
				margin-left: 6px;
			}

			.up {
				background-color: #137EFE;
			}

			.yuyan {
				width: 17px;
				margin-left: 15px;
			}

			.userinfo {
				display: flex;
				align-items: center;

				.money {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 9px 12px;
					background-color: #161D26;
					border-radius: 6px;
					color: #fff;
					text-align: left;
					height: 36px;

					.icon {
						width: 16px;
						height: 16px;
						margin-right: 5px;
						background: url('~@/assets/images/home/usdt.png') no-repeat;
						background-size: 100% 100%;
					}

					.yuan {
						min-width: 80px;
					}

					.add {
						width: 20px;
						height: 20px;
						background: url('~@/assets/images/home/pc_add.png') no-repeat;
						background-size: 100% 100%;
						cursor: pointer;
					}
				}

				.header {
					width: 36px;
					height: 36px;
					background-color: #353F4C;
					border-radius: 6px;
					margin-left: 12px;
					overflow: hidden;
				}
			}
		}
	}

	.pcheader {
		position: relative;
		left: 0;
		max-width: 100vw;
		background: #1B232E;

		.header_com {
			height: 66px;
			padding: 10px 120px;

			.logo {
				width: 31px;
				height: auto;
			}

			.login_box {
				::v-deep .el-button {
					width: 114px;
					height: 42px;
				}

				.yuyan {
					width: 24px;
					margin-left: 30px;
				}
			}
		}
	}
</style>
<style lang="less">
	body .box_language {
		// padding: 6px;
	}

	body .item_language {
		width: 100%;
		height: 54px;
		color: #fff;
		padding: 10px;
		cursor: pointer;
		display: flex;
		align-items: center;
		font-size: 14px;

		// &:hover {
		// 	background-color: #293444;
		// 	border-radius: 6px;
		// }


		img {
			width: 24px;
			margin-right: 12px;
		}

		&.active {
			background-color: #293444;
			border-radius: 6px;
			color: #fff;
		}
	}

	body .item_language2 {
		height: 42px;
		justify-content: center;
	}
</style>